<template>
  <!-- 备案 -->
  <el-descriptions :column="2" size="large" class="td-item">
    <el-descriptions-item label-class-name="right-align" label="项目名称">
      <span class="text--info subtext">{{ projectInfo.projectName }}</span>
    </el-descriptions-item>

    <el-descriptions-item label-class-name="right-align" label="项目编号">
      <span class="text--info subtext">{{ projectInfo.projectCode }}</span>
    </el-descriptions-item>

    <el-descriptions-item label-class-name="right-align" label="评审项目阶段">
      <span class="text--info subtext">备案</span>
    </el-descriptions-item>

    <el-descriptions-item label-class-name="right-align" label="项目状态">
      <span class="text--info subtext">{{
        projectStatus(projectInfo.filgsStageStatus)
      }}</span>
    </el-descriptions-item>

    <el-descriptions-item label-class-name="right-align" label="项目开始时间">
      <span class="text--info subtext">{{
        projectInfo?.ext1?.slice(0, 10)
      }}</span>
    </el-descriptions-item>

    <el-descriptions-item
      label-class-name="right-align"
      label="项目预计验收时间"
    >
      <span class="text--info subtext">{{
        projectInfo?.ext2?.slice(0, 10)
      }}</span>
    </el-descriptions-item>

    <el-descriptions-item label-class-name="right-align" label="项目类型">
      <span class="text--info subtext">{{ projectInfo.projectTypeName }}</span>
    </el-descriptions-item>

    <el-descriptions-item label-class-name="right-align" label="所属公司主体">
      <span class="text--info subtext">{{
        projectInfo.principalCompanyName
      }}</span>
    </el-descriptions-item>

    <el-descriptions-item label-class-name="right-align" label="项目负责人">
      <span class="text--info subtext">{{
        projectInfo.projectLeaderName
      }}</span>
    </el-descriptions-item>

    <el-descriptions-item label-class-name="right-align" label="项目联系人">
      <span class="text--info subtext">{{ projectInfo?.ext4 }}</span>
    </el-descriptions-item>

    <el-descriptions-item label-class-name="right-align" label="项目负责人电话">
      <span class="text--info subtext">{{
        projectInfo.projectLeaderPhone
      }}</span>
    </el-descriptions-item>

    <el-descriptions-item label-class-name="right-align" label="项目联系人电话">
      <span class="text--info subtext">{{
        projectInfo.projectContactPhone
      }}</span>
    </el-descriptions-item>

    <el-descriptions-item label-class-name="right-align" label="项目负责人邮箱">
      <span class="text--info subtext">{{
        projectInfo.projectLeaderEmail
      }}</span>
    </el-descriptions-item>

    <el-descriptions-item label-class-name="right-align" label="项目联系人邮箱">
      <span class="text--info subtext">{{
        projectInfo.projectContactEmail
      }}</span>
    </el-descriptions-item>

    <el-descriptions-item
      label-class-name="right-align"
      label="是否含可行性研究"
    >
      <span
        class="text--info subtext"
        v-text="projectInfo?.isFsbStudy == 1 ? '是' : '否'"
      ></span>
    </el-descriptions-item>

    <el-descriptions-item label-class-name="right-align" label="项目立项书">
      <div v-if="projectInfo?.projectProposalArr?.length" class="file-wrap">
        <p
          class="text--info download-link subtext"
          v-for="(obj, index) in projectInfo?.projectProposalArr"
          :key="index"
          @click.prevent="handlePreview(obj)"
        >
          <el-link :underline="false" icon="el-icon-folder">{{
            obj?.fileName
          }}</el-link>
        </p>
      </div>

      <div class="text--info subtext file-wrap" v-else>-</div>
    </el-descriptions-item>

    <el-descriptions-item label-class-name="right-align" label="项目申报材料">
      <div v-if="projectInfo?.kyFilesArr?.length" class="file-wrap">
        <p
          class="text--info download-link subtext"
          v-for="(obj, index) in projectInfo?.kyFilesArr"
          :key="index"
          @click.prevent="handlePreview(obj)"
        >
          <el-link :underline="false" icon="el-icon-folder">{{
            obj?.fileName
          }}</el-link>
        </p>
      </div>
      <div class="text--info subtext file-wrap" v-else>-</div>
    </el-descriptions-item>
  </el-descriptions>

  <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane
      v-for="item in tabs"
      :label="item.name"
      :name="item.value"
      :key="item.value"
    ></el-tab-pane>

    <el-descriptions
      :column="2"
      size="large"
      class="td-item"
      v-if="activeName == 'ky'"
    >
      <el-descriptions-item label-class-name="right-align" label="可行性报告">
        <div v-if="projectInfo?.filgsKyFilesArr?.length" class="file-wrap">
          <p
            class="text--info download-link subtext"
            v-for="(obj, index) in projectInfo?.filgsKyFilesArr"
            :key="index"
            @click.prevent="handlePreview(obj)"
          >
            <el-link :underline="false" icon="el-icon-folder">{{
              obj?.fileName
            }}</el-link>
          </p>
        </div>
        <div class="text--info subtext file-wrap" v-else>-</div>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label="备注">
        <span class="text--info subtext">{{ projectInfo.filgsKyDesc }}</span>
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions
      :column="2"
      size="large"
      class="td-item"
      v-if="activeName == 'lx'"
    >
      <el-descriptions-item label-class-name="right-align" label="立项文档">
        <div v-if="projectInfo?.filgsLxFilesArr?.length" class="file-wrap">
          <p
            class="text--info download-link subtext"
            v-for="(obj, index) in projectInfo?.filgsLxFilesArr"
            :key="index"
            @click.prevent="handlePreview(obj)"
          >
            <el-link :underline="false" icon="el-icon-folder">{{
              obj?.fileName
            }}</el-link>
          </p>
        </div>
        <div class="text--info subtext file-wrap" v-else>-</div>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label="备注">
        <span class="text--info subtext">{{ projectInfo.filgsLxDesc }}</span>
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions
      :column="2"
      size="large"
      class="td-item"
      v-if="activeName == 'ss'"
    >
      <el-descriptions-item label-class-name="right-align" label="实施文档">
        <div v-if="projectInfo?.filgsSsFilesArr?.length" class="file-wrap">
          <p
            class="text--info download-link subtext"
            v-for="(obj, index) in projectInfo?.filgsSsFilesArr"
            :key="index"
            @click.prevent="handlePreview(obj)"
          >
            <el-link :underline="false" icon="el-icon-folder">{{
              obj?.fileName
            }}</el-link>
          </p>
        </div>
        <div class="text--info subtext file-wrap" v-else>-</div>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label="备注">
        <span class="text--info subtext">{{ projectInfo.filgsSsDesc }}</span>
      </el-descriptions-item>
    </el-descriptions>

    <template v-if="activeName == 'ys'" class="td-item">
      <el-descriptions :column="2" size="large">
        <el-descriptions-item label-class-name="right-align" label="验收文档">
          <div v-if="projectInfo?.filgsYsFilesArr?.length" class="file-wrap">
            <p
              class="text--info download-link subtext"
              v-for="(obj, index) in projectInfo?.filgsYsFilesArr"
              :key="index"
              @click.prevent="handlePreview(obj)"
            >
              <el-link :underline="false" icon="el-icon-folder">{{
                obj?.fileName
              }}</el-link>
            </p>
          </div>
          <div class="text--info subtext file-wrap" v-else>-</div>
        </el-descriptions-item>

        <el-descriptions-item label-class-name="right-align" label="备注">
          <span class="text--info subtext">{{ projectInfo.filgsYsDesc }}</span>
        </el-descriptions-item>
      </el-descriptions>

      <el-table
        v-if="projectInfo.scientificAchvs?.length > 0"
        :data="projectInfo.scientificAchvs"
        border
        :header-cell-style="{
          background: '#eef1f6',
          color: '#606266'
        }"
      >
        <el-table-column type="index" label="序号" />
        <el-table-column prop="kyNum" label="编号"> </el-table-column>
        <el-table-column prop="kyName" label="成果名称"> </el-table-column>

        <el-table-column label="成果来源">
          <template #default="{ row }">
            {{ row.kyTypeName || "其他" }}
          </template>
        </el-table-column>
        <el-table-column label="附件">
          <template #default="{ row }">
            <el-link
              v-for="(item, index) in row?.kyAttachmentArr"
              :key="index"
              @click="handlePreview(item)"
              >{{ item.fileName }}</el-link
            >
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="80">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="jump(row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>

    <el-descriptions
      :column="2"
      size="large"
      class="td-item"
      v-if="activeName == 'hpj'"
    >
      <el-descriptions-item label-class-name="right-align" label="后评价文档">
        <div v-if="projectInfo.filgsHpjFilesArr?.length" class="file-wrap">
          <p
            class="text--info download-link subtext"
            v-for="(obj, index) in projectInfo?.filgsHpjFilesArr"
            :key="index"
            @click.prevent="handlePreview(obj)"
          >
            <el-link :underline="false" icon="el-icon-folder">{{
              obj?.fileName
            }}</el-link>
          </p>
        </div>
        <div class="text--info subtext file-wrap" v-else>-</div>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label="备注">
        <span class="text--info subtext">{{ projectInfo.filgsHpjDesc }}</span>
      </el-descriptions-item>
    </el-descriptions>
  </el-tabs>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import { postDictList } from "/@/api/common";
const props = defineProps({
  projectInfo: {
    type: Object
  }
});
let info = ref({});
const projectStatusList = ref([]);
const activeName = ref("ky");
const tabs = [
  { name: "可研", value: "ky" },
  { name: "立项", value: "lx" },
  { name: "实施", value: "ss" },
  { name: "验收", value: "ys" },
  { name: "后评价", value: "hpj" }
];
watch(
  () => props.projectInfo,
  newvalue => {
    info.value = newvalue;
  },
  { immediate: true }
);
onMounted(() => {
  info.value = props.projectInfo;
});

//获取项目状态
const initProjectStatusList = async () => {
  try {
    const params = {
      dicType: "rd_project_stage_code"
    };
    const { code, data } = await postDictList(params);
    if (code === 200) {
      projectStatusList.value = data;
    }
  } catch (err) {
    console.log(err);
  }
};

const projectStatus = value => {
  if (projectStatusList.value?.length) {
    const target = projectStatusList.value.find(el => value == el.dicCode);
    return target.dicValue;
  }
};

const handlePreview = (item: any) => {
  if (item.response) {
    window.open(
      `${location.origin}${location.pathname}#/online?uuidFile=${item?.response.data.uuidFile}&fileName=${item?.response.data.fileName}`
    );
  } else {
    window.open(
      `${location.origin}${location.pathname}#/online?uuidFile=${item.uuidFile}&fileName=${item.fileName}`
    );
  }
};

const jump = item => {
  const local = location.href.split("#")[0];
  let path = "";
  switch (item.kyTypeName) {
    case "专利":
      path = "#/document/scientific/patent";
      break;
    case "软件著作":
      path = "#/document/scientific/software";
      break;
    case "论文":
      path = "#/document/scientific/paper";
      break;
    case "专著":
      path = "#/document/scientific/book";
      break;
    case "标准":
      path = "#/document/scientific/standard";
      break;
    case "科技奖励":
      path = "#/document/scientific/award";
      break;
    case "科技制度建设":
      path = "#/document/scientific/building";
      break;
    default:
      path = "#/document/scientific/other";
      window.open(
        `${local}${path}?id=${item.id}&projectNum=${item.projectManageCode}&mode='look'`
      );
      return;
  }

  window.open(
    `${local}${path}?id=${item.kyId}&projectNum=${item.projectManageCode}&mode='look'`
  );
};
initProjectStatusList();
</script>

<style lang="scss" scoped>
.file-wrap {
  display: inline-block;
  vertical-align: top;
}
.demo-tabs {
  margin-top: 10px;
}
</style>
